<template>
    <div class="root">
        <main>
            <label class="option" v-for="item in options" :key="item.model">
                <span class="title">{{ item.title }}：</span>
                <Input
                    v-model:value="loginCredentials[item.model]"
                    :type="item.type"
                    placeholder="Basic usage"
                />
            </label>
            <Button class="btn-submit" type="primary" @click="submit"
                >登录</Button
            >
        </main>
    </div>
</template>

<script>
    import { Input, Button } from "ant-design-vue";
    import { reactive, ref } from "vue";
    import { useRouter } from "vue-router";

    export default {
        components: { Input, Button },
        setup() {
            const loginCredentials = reactive({ username: "123", password: "123" });
            const options = [
                { title: "用户名", model: "username", type: "text" },
                { title: "密码", model: "password", type: "password" },
            ];
            const router = useRouter();

            const submit = () => {
                console.log(loginCredentials);
                router.push("/visitRecord");
            };
            return { loginCredentials, options, submit };
        },
    };
</script>

<style lang="scss" scoped>
    main {
        position: absolute;
        border-radius: 8px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 30px;
        background-color: #fff;
        > .option {
            display: flex;
            align-items: center;
            margin-bottom: 30px;
            > .title {
                width: 100px;
            }
        }
        > .btn-submit {
            display: block;
            width: 80%;
            margin: auto;
        }
    }
</style>
